<template>
  <view>
    <u-navbar title="商城订单" :border-bottom="false" back-icon-size="48"></u-navbar>
    <u-tabs :list="tabList" :is-scroll="false" active-color="#333333" bar-height="4" bar-width="64"
            :bar-style="barStyle" :current="current" @change="tabChange" :bold="false"></u-tabs>
    <view class="main">
      <view class="ul">
        <view class="li" v-for="(item,index) in orderLsit" :key="index">
          <view class="top">
            <text>爱世界超商城</text>
            <text style="color: #FF4600;">{{ item.order_status_name }}</text>
          </view>
          <view class="mid" @click="navTo('./detail?id='+item.id)">
            <image class="shopimg" :src="item.goods_sku[0].image_path" mode=""></image>
            <view class="tit">
              {{ item.goods_sku[0].name }}
            </view>
            <view class="num">
              x{{ item.goods_sku[0].num }}
            </view>
          </view>
          <view class="price">
            合计
            <text>¥ {{ item.order_amount }}</text>
          </view>
          <view class="btnBox">
            <view class="btn" @click="delOrder(item.id)" v-if="item.order_status == 3">
              删除订单
            </view>
            <view class="btn" @click="calOrder(item.id)" v-if="item.pay_status == 0 && item.order_status == 0">
              取消订单
            </view>
            <view class="btn" @click="do_pay(item)" v-if="item.pay_status == 0 && item.order_status == 0">
              去支付
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="showPayway" mode="bottom" closeable>
      <view class="payway">
        <view class="title">
          选择支付方式
        </view>
        <view class="payway-li" @click="choosePay(1)">
          <image src="../../../../static/imgs/weixinzf.png" mode=""></image>
          <text>微信支付</text>
          <view class="left" v-if="payCur == 1">
            <u-icon name="checkbox-mark" color="#2979ff" size="32"></u-icon>
          </view>
        </view>
        <view class="payway-li" @click="choosePay(2)">
          <image src="../../../../static/imgs/zhifubaozf.png" mode=""></image>
          <text>支付宝</text>
          <view class="left" v-if="payCur == 2">
            <u-icon name="checkbox-mark" color="#2979ff" size="32"></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import myRequest from '@/api/index.js'
import oRequest from '@/api/order.js'

export default {
  data() {
    return {
      current  : 0,
      barStyle : {
        background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
      },
      page     : 1,
      orderLsit: [],
      tabList  : [{
        name: '全部',
      },
                  {
                    name: '未支付',
                  },
                  {
                    name: '已支付',
                  },
                  {
                    name: '已完成',
                  }
      ],
      showPayway:false,
      payCur:'',
      r_order :{}
    }
  },
  onLoad() {
    this.getOrder()
  },
  onReachBottom() {
    this.page++
    this.getOrder()
  },
  methods: {
    //删除订单
    async delOrder(id) {
      let res = await oRequest.shopDelOrder({
                                              order_id: id
                                            })
      uni.showToast({
                      title:res.msg,
                      icon:'none'
                    })
      setTimeout(()=>{
        this.page = 1
        this.orderLsit = []
        this.getOrder()
      },1000)
    },
    //取消订单
    async calOrder(id) {
      let res = await oRequest.shopCalOrder({
                                              order_id: id
                                            })
      if(res.status){
        uni.showToast({
          title:res.msg,
          icon:'none'
                      })
        setTimeout(()=>{
          this.page = 1
          this.orderLsit = []
          this.getOrder()
        },1000)

      }
    },
    //去支付
    do_pay(item) {
      this.r_order = item
      this.showPayway = true
    },
    choosePay(index) {
      this.payCur = index
      let payCode = ''
      if (index == 1) {
        // 微信支付
        payCode = '6004'
      }
      if (index == 2) {
        //支付宝支付
        payCode = '6005'
      }
      this.showPayway = false
     // console.log(this.r_order)
      uni.navigateTo({
                       url: '../../pay/pay?payCode=' + payCode + '&payId=' + this.r_order.pay_id
                     })
    },
    //获取订单
    async getOrder() {
      let {
            page,
            current
          }   = this
      let res = await myRequest.getMyorder({
                                             page        : page.toString(),
                                             promote     : '0',
                                             order_status: current
                                           })
      if (res.status) {
        console.log(res)
        this.orderLsit = [...this.orderLsit, ...res.data]
      }
    },
    navTo(url) {
      uni.navigateTo({
                       url: url
                     })
    },
    tabChange(index) {
      this.current = index
      this.page    = 1
      this.orderLsit = []
      this.getOrder()
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 0 20rpx;

  .ul {
    width: 100%;
    padding: 32rpx 0;

    .li {
      width: 100%;
      height: auto;
      background: #FFF;
      border-radius: 16rpx;
      margin-bottom: 32rpx;

      .top {
        height: 88rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-family: Arial;
        font-weight: 400;
        color: #333;
      }

      .mid {
        display: flex;
        padding: 0 20rpx;

        .shopimg {
          width: 160rpx;
          height: 160rpx;
        }

        .tit {
          margin-left: 24rpx;
          width: 60%;
          font-size: 30rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #333;
        }

        .num {
          margin-left: auto;
          font-size: 28rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #333;
        }
      }

      .price {
        font-size: 24rpx;
        font-family: Segoe UI;
        font-weight: 400;
        color: #666;
        padding: 22rpx 20rpx 22rpx 0;
        text-align: right;

        text {
          font-size: 32rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #333;
          margin-left: 6rpx;
        }
      }

      .btnBox {
        padding: 14rpx 20rpx 26rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .btn {
          margin-left: 20rpx;
          width: 176rpx;
          height: 60rpx;
          border: 2rpx solid rgba(153, 153, 153, 0.4);
          border-radius: 40rpx;
          font-size: 28rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #666;
          text-align: center;
          line-height: 60rpx;
        }
      }
    }
  }
}
.payway {
  padding-bottom: 20rpx;

  .title {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .payway-li {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 56rpx;

    image {
      width: 44rpx;
      height: 44rpx;
    }

    text {
      margin-left: 16rpx;
      font-size: 32rpx;
      font-family: Alibaba Sans;
      font-weight: 400;
      color: #333333;
    }

    .left {
      margin-left: auto;
    }
  }
}
/deep/ .u-checkbox__label {
  margin-left: 0rpx;
  margin-right: 0rpx;
}
</style>
